<template>
  <div class="login-container">
    <div class="banner-img">
      <img
        width="460"
        src="~@/assets/images/register/banner.png"
        alt=""
      >
    </div>
    <div class="login-form-container">
      <div class="title">
        Retrieve Password
      </div>

      <LoginForm />
    </div>
  </div>
</template>

<script>
import LoginForm from './Form.vue';

export default {
  name: 'Login',

  components: {
    LoginForm
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  background-color: $white;
  padding: 150px 110px 150px 130px;
  .banner-img {
    // padding-top: 80px;
    margin-right: 100px;
  }
  .login-form-container {
    flex: 1;
    & > .title {
      font-size: 32px;
      color: #1A1C1D;
      margin-bottom: 33px;
      font-weight: bold;
    }
  }
}
</style>
